<script lang="ts" setup>
import { loadFile } from '@/utils'
import avatar from '@/assets/avatar.png'
import img from '@/assets/images/welcome.png'
const nickname = computed(() => sessionStorage.getItem('name'))
</script>
<template>
  <div class="page flex-c">
    <div class="user-container flex-center mb30">
      <a-avatar>
        <img :src="avatar" alt="" />
      </a-avatar>
      <div class="info ml10">
        <span>{{ nickname }}</span>
        <span class="ml20">欢迎回来</span>
      </div>
    </div>
    <img class="img" :src="img" alt="" />
  </div>
</template>
<style lang="less" scoped>
.page {
  background: white;
  height: 80vh;
  .img {
    margin: auto;
  }
  :deep(.arco-card-header) {
    border: none;
  }
  :deep(.arco-card) {
    border: none;
  }
  .user-container {
    background: white;
    padding: 20px;
  }
  .list {
    .item {
      margin-bottom: 20px;
      .title {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 700;
      }
      .title1 {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .item1 {
      }
      .item2 {
        margin-bottom: 10px;
        padding: 10px;
        &:not(:nth-child(3n)) {
          border-right: 1px solid #e5e5e5;
        }
      }
      .title2,
      .num {
        text-align: center;
      }
      .num {
        font-size: 20px;
        font-weight: 700;
        color: rgb(var(--link-6));
      }
    }
  }
}
</style>
